<template>
	<view class="task-wrap">
		<view class="scroll-wrap" style="position: relative;">
			<view class="tabContainer" style="margin-bottom: 120px;">
				<!-- 样品列表 -->
				<view class="sample-term-wrap">
					<view class="top_head" v-if="source != 'addFactor'">
						<view class="top_head_nav">
							<b style="width: 80px;">样品编号</b>
							<view class="content">{{edit_addInfo.code}}
							</view>
						</view>
						<view class="top_head_nav" style="margin-top: 8px;">
							<b style="width: 80px; font-weight: 700;">检测因子</b>
							<view class="content">{{edit_addInfo.factors}}
							</view>
						</view>
						<view class="top_head_nav" style="margin-top: 8px;">
							<b style="width: 80px;">点位</b>
							<view class="content">{{edit_addInfo.addressVal}}</view>
						</view>
					</view>

					<view class="sample-term" v-if="source == 'addFactor'">
						<view class="center_between">
							<view class="content center_between">
								<view class="uni-list-cell-left">
									<b>检测类别</b>
								</view>
								<view style="width: 100%;">
									<picker class="width-100" mode="multiSelector" :range="multiArray" @columnchange="bindMultiPickerColumnChange" 
										:value="multiIndex.name" :range-key="'name'" @change="bindMultiChange">
									<view class="" style="display: flex;justify-content: flex-end;align-items: center;">
										
									
										<view style="padding-right: 10px;">
											{{multiArray[0][multiIndex[0]].name}}，{{multiArray[1][multiIndex[1]].name}}
										</view>
										<uni-icons type="forward" size="20"></uni-icons>
									</view>
									</picker>
										
								</view>
							</view>
						</view>
					</view>
					

					<view class="sample-term">
						<view class="center_between">
							<view class="content center_between"> 
								<u-search style="width: 100%;" placeholder="输入因子/标准号/检测标准/分析方法" v-model="params.fuzzy"  @custom='queryMulti' />
							</view>
						</view>
					</view>

					<view class="sample-term" style="position: relative;"  v-for="(item,index) in multiList" :key="index">
						<view class="center_between">
							<b style="width: 80px;">检测因子</b>
							<view class="content center_between">
								<b class="content" style="margin-right: 10px;text-align: left;color: #193566;font-weight: 700;">
									{{item.factorName}}
								</b>
							</view>
						</view>
						<view class="center_between" style="margin: 8px 0;">
							<view style="width: 80px;font-size: 12px;">标准号</view>
							<view class="content center_between">
								<view class="content" style="margin-right: 10px;text-align: left;">
									{{item.standardNo}}
								</view>
							</view>
						</view>
						<view class="center_between" style="margin:0 0 8px 0;">
							<view style="width: 80px;font-size: 12px;">标准名称</view>
							<view class="content center_between">
								<view class="content" style="margin-right: 10px;text-align: left;">
									{{item.standardName}}
								</view>
							</view>
						</view>
						<view class="center_between">
							<view style="width: 80px;font-size: 12px;">分析方法</view>
							<view class="content center_between">
								<view class="content" style="margin-right: 10px;text-align: left;">
									{{item.analysisMethod}}
								</view>
							</view>
						</view>

						<view class="nav_btn">
							<u-checkbox activeColor="#2a3688" @change="checkboxChange(item)" v-model="item.checked"
								shape="square"></u-checkbox>
						</view>
					</view>


					<u-empty v-if="multiList.length == 0" mode="search" style="margin-top:50px"></u-empty>

				</view>
			</view>

			<!-- <view class="footerBtn" style="display: flex;" >
				<view class="btn footerBtn footerBtns">
					<view style="padding:0 10px;flex: 1;">
						<u-button class="rightTabsBtn rightTabsSingleBtn" type="primary" @click="modify" style="color: #fff;">提交</u-button>
					</view>
				</view>
			</view> -->

			<view class="footerBtn" style="display: flex;">
				<view class="btn footerBtn footerBtns" style="justify-content: center;">
					<!-- <view class="" style="position: relative;flex: 1;">
						<view style="padding:0 10px;">
							<u-button class="leftTabsBtn" type="warning" @click="openDialogBtns">保存</u-button>
						</view>
					</view> -->

					<view style="padding:0 10px;width: 50%;">
						<button class="rightTabsBtn" type="primary" @click="commit">提交</button>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				multi:'',
				isNoise:false,
				multiArray: [],
				multiIndex: [0, 0],

				typesArr: [],

				checked: false,
				show: false,
				multiList:'',
				
				checkboxVisible: true,
				secdClassName:'',
				source: '',
				taskId: '',
				edit_addInfo:{
					code: '',
					factors: '',
					addressVal: '',
				},
				params:{
					"classId":"",//一级类别
					"factorName":"",//检测因子
					"pageNumber":1,
					"pageSize":9999,
					"secdClassId":"",//二级类别
					"authType":0,	//套餐认证类型
					"fuzzy":'',//模糊搜索字段
				},
				sampleTaskInfo: {
					projectName: '',
					consignorName: '',
					inspectionName: '',
					sampleCount: '',
					jobId: '',
					inspectionLinker: '',
					singImageUrl: '',
					sampleVos: [],
				}
			}
		},
		onLoad(e) {
			
			if (e.taskId) {
				this.taskId = e.taskId
			}
			if (e.source) {
				this.source = e.source
			}
			console.log(e);
			if(e.source == 'edit_addFactor'){
				this.edit_addInfo = JSON.parse(decodeURIComponent(e.dataInfo))
				this.params.secdClassId = this.edit_addInfo.secdClassId
				this.params.classId = this.edit_addInfo.secdClassId.substring(0,3)
			}else {
				this.getTypes()
			}
			this.queryMulti()
		},
		onShow() {
			uni.showLoading({
			    	title:"加载中..."
				})
		},
		methods: {
			commit(){
				let arr = []
				console.log(this.multiList,36565);
				this.multiList.map((item)=>{
						if(item.checked) {
							item.isNoise = false
							if(item.classId == '004') item.isNoise = true
							item.secdClassId = this.params.secdClassId
							item.secdClassName = this.secdClassName
							item.checkStandardId = item.standardCode
							item.isFactor = 0
							arr.push(item)
						}
					})
				
				uni.$emit('query' ,{ paramsName : arr});
				
				uni.navigateBack({
				                delta: 1
				              })
			},
			//获取类别
			getTypes() {
				this.$api.commonForGet('platform/factor/findClassTrees', res => {
					if(res.code == 200){
					this.typesArr = res.result
					this.multiArray[0] = res.result
					this.multiArray[1] = res.result[0].children
					this.params.classId = res.result[0].id || ''
					this.params.secdClassId = res.result[0].children[0].id || ''
					this.secdClassName = this.multiArray[1][0].name
					this.$forceUpdate()
					}
				})
			},
			bindMultiChange(e) {
				let i = e.target.value[0]
				let j = e.target.value[1]
				this.params.classId = this.multiArray[0][i].id || ''
				this.params.secdClassId = this.multiArray[0][i].children[j].id || ''
				this.secdClassName = this.multiArray[0][i].children[j].name
				this.queryMulti()
			},
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0: 
						this.multiArray[1] = this.multiArray[0][e.detail.value].children
						// this.multiIndex.splice(0, 0);
						break;
					// case 1: //拖动第2列
					// 	//this.multiArray[1] = ['北京', '上海', '广州'];
					// 	// this.multiIndex.splice(1, 0);
					// 	break;
				}
				this.$forceUpdate();
			},
			//搜索查询因子事件
			queryMulti(){
				uni.showLoading({
				    	title:"加载中..."
					})
				this.$api.commonForPost('common/findCheckStandardsByCondition', this.params, res => {
					// console.log(res.result.records, 'res');
					
						
					if(res.code == 200) {
						this.multiList = res.result.records
						this.multiList.map((item)=>{
							item.checked = false
						})
					}
					setTimeout(()=>{
						            uni.hideLoading()
						        },3000)
				})
			},
			//复选框选中事件
			checkboxChange(e) {
				this.$forceUpdate()
			},
		}
	}
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}
	/deep/ .u-action {
		color: #1479FC!important;
	}
	.task-wrap {
		background: #F0F2FA;
		height: 100vh;
		display: flex;
		flex-direction: column;

	}

	.project-info {
		height: 280rpx;
		width: calc(100%-98rpx);
		background-color: #D6D8DF;
		padding-left: 49rpx;
		padding-right: 49rpx;
	}

	.sample-detail {
		margin-top: 20rpx;
		font-size: 25rpx;
		height: 32rpx;
		display: flex;
		align-items: center;

	}

	.sample-detail .title {
		color: #193566;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 140rpx;
		text-align: right;
	}

	.sample-detail .value {
		color: #193566;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left: 5%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}

	.scroll-wrap {
		flex: 1;
		overflow: scroll;
		padding-bottom: 50rpx;
	}

	.tabContainer {
		height: auto;
	}

	.signature {
		position: absolute;
		top: 0;
		right: 0;
		width: 167rpx;
		height: 61rpx;
		color: #fff;
		background-color: #193566;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.signatureImg image {
		position: absolute;
		top: 0;
		right: 0;
		width: 61rpx;
		height: 61rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.footerBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.btn {
		border-radius: 0;
		width: 100%;
		background: #2f3a89;
	}

	.footerBtns {
		display: flex;
		background: #d2dcf8;
		padding: 10rpx 0;
		box-shadow: -1px 0 1px #ccc;
	}

	.dialogBtns {
		position: absolute;
		top: -180rpx;
		left: 0;
		padding: 10rpx 20rpx;
		background: #d2dcf8;
		width: 100%;
		box-shadow: 1px 0px 1px #ccc;
		padding-top: 20rpx;
	}

	.dialogBtn {
		border: 1px solid #eee;
		margin-bottom: 10rpx;
		width: 100%;
		padding: 0;
		font-size: 14px;
		height: 60rpx;
		color: #2f3a89;
		background: #ffda94;
	}

	.leftTabsBtn {
		width: 100%;
		border: 1px solid #fff;
		height: 60rpx;
		font-size: 14px;
		color: #2f3a89;
		background: #d3dcf9;
		box-shadow: 0px 0px 1px 1px #bbb;
	}

	.rightTabsBtn {
		height: 60rpx;
		font-size: 14px;
		background: #2f3a89;
	}

	.rightTabsSingleBtn {
		width: 50%;
		color: #2f3a89;
		height: 60rpx;
		font-size: 14px;
		box-shadow: 1px 1px 3px #ccc;
	}

	.center_between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_head {
		background: #d7dae1;
		margin-top: 8px;
		padding: 10px;
		border-radius: 8px;
	}

	.top_head_nav {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.content {
		flex: 1;
		text-align: right;
		color: #68696d;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.sample-term-wrap {
		width: calc(100%-70rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* align-items: center; */
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	.sample-term {
		/* width: 90%; */
		/* min-height:390rpx; */
		/* height:370rpx; */
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.16);
		margin-top: 20rpx;
	}

	.nav_btn {
		position: absolute;
		top: 10rpx;
		right: 0rpx;
	}

	.navSingleBtn {
		height: 50rpx;
		color: #fff;
		font-size: 12px;
		padding: 0 8px;
		background: #2f3a89;
		box-shadow: 1px 1px 3px #ccc;
	}
</style>
